import React, { useMemo, useState } from 'react';
// import { Line } from '@ant-design/plots';
// import numeral from 'numeral';
import moment from 'moment';
import { Card, Col, DatePicker, Radio, Row } from 'antd';
import LineChart from '@/components/report/lineChart';
type PropField = {
  title: string;
  data: API.ZyZhAndSy[];
  nfyf: string;
  height: number;
  onChange: (val: string) => void;
  loading: boolean;
};
const ZhSyAnalysis: React.FC<PropField> = (props) => {
  const [valType, setValType] = useState(1);
  const datas = useMemo(() => {
    const ds: Record<string, any> = [];
    props.data.forEach((item) => {
      ds.push({
        nfyf: item.nfyf,
        yCol: valType === 1 ? item.zhhj : valType === 2 ? item.zhjx : item.zhfy,
        series: '挣回',
      });
      ds.push({
        nfyf: item.nfyf,
        yCol: valType === 1 ? item.syhj : valType === 2 ? item.syjx : item.syfy,
        series: '使用',
      });
    });
    return ds;
  }, [props.data, valType]);
  // const config = {
  //   data: datas,
  //   height: props.height - 30,
  //   padding: 0,
  //   xField: 'nfyf',
  //   yField: 'yCol',
  //   colorField: 'series',
  //   tooltip: { channel: 'y', valueFormatter: (d: number) => numeral(d).format('0,0') },
  //   // axis: {
  //   //   x: false,
  //   //   y: false,
  //   // },
  // };
  return (
    <Card
      size="small"
      title={props.title}
      bodyStyle={{ padding: '0px', height: props.height }}
      extra={
        <Row gutter={8}>
          <Col>
            <Radio.Group
              value={valType}
              size="small"
              onChange={(e) => setValType(Number(e.target.value))}
            >
              <Radio.Button key={1} value={1}>
                整体
              </Radio.Button>
              <Radio.Button key={2} value={2}>
                绩效
              </Radio.Button>
              <Radio.Button key={3} value={3}>
                费用
              </Radio.Button>
            </Radio.Group>
          </Col>
          <Col>
            <DatePicker
              onChange={(_, v) => props.onChange(v)}
              defaultValue={moment(props.nfyf, 'YYYY-M-D')}
              picker="month"
              size="small"
            />
          </Col>
        </Row>
      }
    >
      {/* <Line {...config} /> */}
      <LineChart datas={datas} xCol="nfyf" yCol="yCol" zCol="series" height={props.height} />
    </Card>
  );
};
export default ZhSyAnalysis;
